//
import React from 'react'
import { CarOutlined, SettingOutlined, CodeSandboxOutlined, MoreOutlined, HistoryOutlined } from '@ant-design/icons';
import { Avatar, Layout, Menu, theme } from 'antd';
import { useState } from 'react';
import { useDispatch } from 'react-redux';//这个是读取state的
import { setLogoutState } from '../../store/slice/loginslice';
import './MainCmpt.css'
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { usePostlogoutMutation } from '../../store/request/loginrequest';

import { useSelector } from 'react-redux';
import { useGetlastestsystemversionQuery } from '../../store/request/systemversionrequest';
//import {IconFontDataClean} from '../../utils/iconfont_dataclean'

const { Header, Content, Footer, Sider } = Layout;



function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const leftitems = [
  getItem('CSV文件监控项目', 'dmprojects', <CarOutlined />),
  getItem('GZ压缩文件监控项目', 'dmdbcprojects', <CarOutlined />),

];


const MainCmpt = () => {
  //console.log("maincmpt");
  const result =useGetlastestsystemversionQuery();
  const loginstate = useSelector(state => state.loginpara);
  const webapiavarterpath = window.app + "AvarterUpload/";
  // console.log(loginstate.role.avatarpath);
  const [edittrigger] = usePostlogoutMutation();
  const dispatch = useDispatch();
  const navigate = useNavigate();//获取navigateapi
  const location = useLocation();//获取地址api的参数
  const [collapsed, setCollapsed] = useState(false);

  const [username] = useState(location.state);//从登陆成功后会传递用户名参数到这里，然后由usestate来获取
  const [activeKeySide, setActiveKeySide] = useState("");//侧边菜单项的突出显示key
  const [activeKeyHorizontal, setActiveKeyHorizontal] = useState("");//水平菜单项的突出显示key

  const handleSelectSide = (item) => {
    setActiveKeySide(item.key);
    setActiveKeyHorizontal("");//当选中侧边菜单项时，取消水平菜单项的突出显示
  };

  const handleSelectHorizontal = (item) => {
    setActiveKeyHorizontal(item.key);
    setActiveKeySide(""); // 取消侧边菜单项的选中状态
  };

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const topitem = [

    getItem(username, 'user', <Avatar src={loginstate && <img src={webapiavarterpath + loginstate.role.avatarpath} alt="加载图片" />} />,
      [
        getItem('修改密码', 'passwordedit'),
        getItem('修改头像', 'avateredit'),
        getItem('注销', 'logout'),

      ]),


    getItem('设置', 'setup', <SettingOutlined />, [
      getItem('账户设置', 'accountsetup'),
      getItem('参数设置', 'propertysetup', <SettingOutlined />, [
        getItem('公共参数', 'dmpublicprops'),

      ])
    ]),
    getItem('版本', 'version', <CodeSandboxOutlined />, [
      getItem('版本记录', 'versionhistory', <HistoryOutlined />),
      getItem('版本时间轴', 'versiontimeline', <MoreOutlined />)
    ]),
  ];

  //主导航菜单栏的点击事件，增加tabitem
  const mainmenuonClick = (e) => {

    //根据e.key来跳转路由
    navigate(e.key, true);
    // console.log("点击了tab"+activateitem);

  };
  //副导航菜单栏的点击事件
  const submenuonClick = async (e) => {
    if (e.key === 'logout') {
      await edittrigger();
      dispatch(setLogoutState())
    }
    else {
      navigate(e.key, true);
    }

  };
  //console.log(version);
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        {/* 这个是logo放的位置 */}

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: 32,
            margin: 16,
            // border: '1px solid',
            color: 'whitesmoke',
            textAlign: 'center',

          }}>车辆监测系统</div>
        {/* 这个是主导航菜单放的位置 */}
        <Menu onClick={mainmenuonClick} selectedKeys={[activeKeySide]} onSelect={handleSelectSide} theme="dark" mode="inline" items={leftitems} />
      </Sider>
      <Layout className="site-layout">
        <Header

          style={{
            padding: 0,
            background: colorBgContainer,

          }}
        >
          {/* 这个是副导航菜单放的位置 */}
          <Menu onClick={submenuonClick} selectedKeys={[activeKeyHorizontal]} onSelect={handleSelectHorizontal} theme="dark" mode="horizontal" items={topitem} />


        </Header>
        <Content
          style={{
            margin: '10px',
          }}
        >

          <div
            style={{
              padding: 24,
              minHeight: 540,
              background: colorBgContainer,
            }}
          >
            <Outlet />

          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          车辆监测系统V{result.isSuccess ? result.data.data : []} Design ©2023 Created by 俞晓辉
        </Footer>
      </Layout>
    </Layout>
  );
}

export default MainCmpt

